<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建动画</title>
		<style type="text/css">
			.wrap {
				margin: 100px auto;
				width: 400px;
				height: 400px;
				border: 1px solid #FF6700;
			}
			.inner {
				width: 100px;
				height: 100px;
				background-color: #FF0000;
				background-clip: content-box;
				
				animation-name: slide;
				animation-duration: 4s;
				animation-iteration-count: 2;
				animation-direction: alternate-reverse;
			}
			/*创建一个动画*/
			@keyframes slide{
				/* 0%,100% {
					transform: translate(0);
				}	 */
				25%{
					/* width: 100px;
					height: 100px;
					border: none; */
					transform: translate(300%,0);
					background-color: #4D1DB3;
					/* border-radius: 50%; */
				}
				50%{
					/* width: 100px;
					height: 100px;
					border: none; */
					transform: translate(300%,300%);
					background-color: #3bb321;
					
				}
				75%{
					transform: translate(0,300%);
					background-color: #b0b310;
					/* border-radius: 50%;
					width: 0;
					height: 0;
					border: 50px solid transparent;
					border-bottom:50px solid #B3080E ;} */
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="inner"></div>
		</div>
	</body>
</html>
